<template>
    <div class="set-market-view"> 
        <mt-header fixed title="牛人" class="mt-header">
            <router-link to="/follow-account" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
        </mt-header>
        <div class="content-page">
            <h4>选择经纪商</h4>
            <div class="brokers">
                <div class="brokers-item" v-for="(item, index) in brokers" >
                    <img :src="item.proImg" alt="" @click="choose(index)">
                </div>
            </div>
            <h4>MT4账号</h4>
            <input type="text" v-model="mt4Account">
            <h4>MT4只读密码</h4>
            <input type="text" v-model="mt4Password">
            <h4>经纪商服务器</h4>
            <select id="" v-model="brokerServers">
                <option selected>选择经纪商服务器</option>
                <option v-for="item in brokers[choosedIndex].servers" >{{item}}</option>
            </select>

            <button @click="submit">提交</button>
        </div>

        <my-footer></my-footer>
    </div>
</template>

<script>
    import { mapState } from 'vuex'
    export default {
        name: 'SetMarketView',
        data() {
            return {
                mt4Account: '',
                mt4Password: '',
                brokerServers: '选择经纪商服务器',
                choosedId: '',
                choosedIndex: '0',
                brokers: [{
                    id: '001',
                    proImg: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180226/FlchG8fDHj.png',
                    servers: [
                        '服务器1-1',
                        '服务器1-2',
                        '服务器1-3',
                        '服务器1-4',
                        '服务器1-5'
                    ]
                },{
                    id: '002',
                    proImg: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180226/FlchG8fDHj.png',
                    servers: [
                        '服务器2-1',
                        '服务器2-2',
                        '服务器2-3',
                        '服务器2-4',
                        '服务器2-5'
                    ]
                },{
                    id: '003',
                    proImg: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180226/FlchG8fDHj.png',
                    servers: [
                        '服务器3-1',
                        '服务器3-2',
                        '服务器3-3',
                        '服务器3-4',
                        '服务器3-5'
                    ]
                },{
                    id: '004',
                    proImg: 'http://oz1lum573.bkt.clouddn.com/c-jimmy/180226/FlchG8fDHj.png',
                    servers: [
                        '服务器4-1',
                        '服务器4-2',
                        '服务器4-3',
                        '服务器4-4',
                        '服务器4-5'
                    ]
                }],
                brokerTypes: ['XAUUSD','XAGUSD','AUDUSD','EURUSD','GBPUSD','NZDUSD','USDCAD','USDCHF','USDJPY']
            }
        },
        methods: {
            choose(index) {
                this.choosedIndex = index;
            },
            submit() {
                console.log("我提交了")
            }
        }
        

    }
</script>

<style scoped>
    .set-market-view{
        padding: 40px 15px 0 15px;
        text-align: left;
    }
    .mt-header {
        background: #fff;
        color: #666;
        border-bottom: 1px solid #FFF54C;
    }
    .spacing {
        /*margin-top: 5px;*/
        height: 10px;
        background: #eee;
        margin: -1px -15px 0 -15px;
    }

    .content-page .brokers {
        white-space: nowrap;
        overflow: scroll;
    
    }
    .content-page .brokers-item {
        width: 70px;
        height: 70px;
        margin: 5px;
        border: 1px solid #ccc;
        overflow: hidden;

        display: inline-flex;
        align-items: center;
    }
    .content-page .brokers-item img {
        width: 100%;
    }
    .content-page h4 {
        font-weight: normal;
        margin: 15px 0 5px 0;
        font-size: 14px;
    }
    .content-page input, .content-page select {
        width: 100%;
        height: 25px;
        padding: 0;
        border: none;
        border-bottom: 1px solid #999;
        outline: none;
    }
    .content-page .brokerType {
        height: auto;
    }
    .content-page button {
        display: block;
        margin: 15px auto;
        width: 220px;
        height: 36px;
        line-height: 36px;
        border: none;
        background: #FFF54C;
        border-radius: 3px;
        outline: none;
    }

    
</style>